﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>ticktoo welcomes you. have fun!</title>
    <link href="css/ticktoo.css" rel="stylesheet" type="text/css" />
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.15.custom.css" rel="stylesheet" />	
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.15.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var availableTags = [
        		"music",
        		"sports",
        		"technical",
        		"charity",
        		"commercial"
    		];
    		function split( val ) {
    			return val.split( /,\s*/ );
    		}
    		function extractLast( term ) {
    			return split( term ).pop();
    		}
 
    		$( "#event-tags" )
    			// don't navigate away from the field on tab when selecting an item
    			.bind( "keydown", function( event ) {
    				if ( event.keyCode === $.ui.keyCode.TAB &&
    						$( this ).data( "autocomplete" ).menu.active ) {
    					event.preventDefault();
    				}
    			})
    			.autocomplete({
    				minLength: 0,
    				source: function( request, response ) {
    					// delegate back to autocomplete, but extract the last term
    					response( $.ui.autocomplete.filter(
    						availableTags, extractLast( request.term ) ) );
    				},
    				focus: function() {
    					// prevent value inserted on focus
    					return false;
    				},
    				select: function( event, ui ) {
    					var terms = split( this.value );
    					// remove the current input
    					terms.pop();
    					// add the selected item
    					terms.push( ui.item.value );
    					// add placeholder to get the comma-and-space at the end
    					terms.push( "" );
    					this.value = terms.join( ", " );
    					return false;
    				}
			});
            // Datepicker
    		$('#event-startdate').datepicker({
    		    showOn: "both",
    		    buttonImage: "icons/calendar.png",
    		    buttonImageOnly: true
    		});
    		
    		$('#event-enddate').datepicker({
    		    showOn: "both",
    		    buttonImage: "icons/calendar.png",
    		    buttonImageOnly: true
    		});
    		
    		$( "#event-guest-count-slider" ).slider({
			range: "min",
			value: 25,
			min: 10,
			max: 500,
			slide: function( event, ui ) {
				$( "#event-guest-count" ).val( ui.value );
			}
		});
		$( "#event-guest-count" ).val($( "#event-guest-count-slider" ).slider( "value" ) );

		});
    </script>
</head>

<body>
    <div id="logo"><img src="images/ticktoo-header.png" alt="ticktoo - your world of tickets."/></div>
    <div id="menu">
        <ul id="nav-menu">
            <li><a href="index.html" class="nav-menu-selected" title="your ticktoo's home">my ticktoo</a></li>
            <li><a href="events.html" title="the ticktoo world">ticktoo events</a></li>
            <li><a href="project.html" title="the ticktoo project">the project</a></li>
            <li><a href="contact.html" title="we love feedback">contact us</a></li>
        </ul>
    </div>
    <img id="big-feature" src="images/ticktoo-feature.jpg" alt="best event in town needs ticktoo - create your own now"/>
    <div id="content">
        <div id="main">
            <p class="intro"><span class="color-ticktoo">ticktoo</span> makes it easy for you to host events, keep track of the participants and easily make noise about it throught facebook and twitter - <span class="color-ticktoo">try it now</span>!</p>
            <h1>create your ticktoo event now</h1>
            <div id="event-form">
                <form method="post">
                    <p class="event-section">first, some info about the event</p>
                    <p>
                        <label for="event-name">event name</label>
                        <input id="event-name" type="text"/>
                        <p class="event-field-description">a suggestive name for your event, something like "the big final between harry potter and spiderman"</p>
                    </p>
                    <p>
                        <label for="summary">summary</label>
                        <textarea id="summary" rows="5"></textarea>
                        <p class="event-field-description">the summary of your event - make it shine through an outstanding presentation that will make everyone accept it</p>
                    </p>
                    <p>
                        <label for="event-startdate">start date</label>
                        <input id="event-startdate" type="text"/>
                        <p class="event-field-description">the event should have a start date</p>
                    </p>
                    <p>
                        <label for="event-enddate">end date</label>
                        <input id="event-enddate" type="text"/>
                    </p>

                    <p>
                        <label for="guest-count">guests</label>
                        <input id="event-guest-count" type="text"/>
                        <span class="event-field-slider" id="event-guest-count-slider"/>
                    </p>
                    <p>
                        <label for="event-tags">tags</label>
                        <input id="event-tags" type="text"/>
                    </p>

                    <p>
                        <label for="event-image">event poster</label>
                        <input id="event-image" type="file"/>
                    </p>  
                    <p class="event-section">now, about yourself - the proud organizer</p>
                    <p>
                        <label for="event-organizer">organizer</label>
                        <input id="event-organizer" type="text"/>
                    </p>
                    <p>
                        <label for="event-organizer-email">contact email</label>
                        <input id="event-organizer-email" type="text"/>
                    </p>        
                </form>            
            </div>
        </div>
        <div id="sidebar">
            <h2>already with ticktoo?</h2>
            <div id="login-form">
                <form method="post">
                    <p class="form-field">
                        <label for="username">username</label>
                        <input id="username" type="text"/>
                    </p>
                    
                    <p class="form-field">
                        <label for="password">password</label>
                        <input id="password" type="password"/>
                    </p>
                    <p>
                        <input class="action-button" type="submit" value="login"/>
                    </p>
                </form>
                <p><a href="recoverpassword.html">forgot your password?</a></p>
            </div>
            <h2>ticktoo stream</h2>
        </div>
    </div>
    <div id="footer">
        <p>© ticktoo 2011</p>
    </div>
</body>

</html>
